<template>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo menu"
      :collapse="isCollapse"
      :collapse-transition="false"
      @open="handleOpen"
      @close="handleClose"
      style="height: 100%;"
      :router="true"

    >
    <el-button class="shuo" @click="shuoclick()">
        <el-icon v-if="!isCollapse"><ArrowLeftBold /></el-icon>
        <el-icon v-if="isCollapse"><ArrowRightBold /></el-icon>
    </el-button>
      <el-sub-menu index="banner">
        <template #title>
          <el-icon><location /></el-icon>
          <span>轮播图设置</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="banner">首页轮播图</el-menu-item>
          <!-- <el-menu-item index="1-2">item two</el-menu-item> -->
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="analyse">
        <el-icon><document /></el-icon>
        <template #title>商品数据分析</template>
      </el-menu-item>
      <!-- <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>Navigator Four</template>
      </el-menu-item> -->
    </el-menu>
  </template>

  <script lang="ts" setup>
  import { ref } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    ArrowLeftBold,
    ArrowRightBold
  } from '@element-plus/icons-vue'
  
  const isCollapse = ref(true)
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const shuoclick = ()=>{
    isCollapse.value = !isCollapse.value
  }
  </script>
  
  <style lang="scss" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .menu{
    position: relative;
    // pointer-events: none;
    .shuo{
        width: 35px;
        height: 60px;
        position: absolute;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        right:-35px;
        top: 50%;
        z-index: 999;
    }
  }

  </style>